<template>
  <CommonDialog :dialogShow.sync="dialogShow" :title="curRow?.id ? '编辑训练' : '新增训练'" @makeSure="makeSure">
    <template #content>
      <el-form :model="team" label-width="120px" :rules="rules" class="team" ref="raceRef">
        <el-form-item label="训练名称：" prop="trainingName">
          <common-input v-model="team.trainingName" placeholder="请输入比赛名称"></common-input>
        </el-form-item>
        <el-form-item label="训练时间：" prop="time">
          <el-date-picker v-model="team.time" type="datetimerange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="训练人员：" prop="playerList">
          <common-select v-model="team.playerList" :options="userOptions1" :multiple="true" :disabled="true"
            placeholder="请选择训练人员"></common-select>
        </el-form-item>
        <el-form-item label="比赛地点：" prop="location">
          <common-input v-model="team.location" placeholder="请输入训练地点"></common-input>
        </el-form-item>
        <el-form-item label="比赛内容：" prop="content">
          <common-input v-model="team.content" placeholder="请输入训练内容"></common-input>
        </el-form-item>
      </el-form>
    </template>
  </CommonDialog>
</template>

<script>
export default {
  props: {
    changeDialog: {
      typeof: Boolean,
      default: true,
    },
    curRow: {
      typeof: Object,
      default: () => {
        return {
          id: "",
        };
      },
    },
    playerList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  created() {
    if (this.curRow.id) {
      const keys = Object.keys(this.curRow);
      keys.forEach((key) => {
        if (key == 'trainerList') {

          this.team.playerList = this.curRow[key].map(item => {
            return item.playerId
          })

        } else if (key == 'endTime') {
          this.team.time[0] = this.curRow.startTime.replace('T',' ')
          this.team.time[1] = this.curRow.endTime.replace('T',' ')
        } else {
          this.team[key] = this.curRow[key];
        }
      });
    }
    console.log(this.team,'time');
    this.userOptions1 = this.playerList.map(item => {
      return {
        value: item.id,
        label: item.name,
        disabled: false
      }
    })
  },
  data() {
    return {
      team: {
        trainingName: "",
        time: [],
        playerList: [],
        location: "",
        content: ""
      },
      refereeList: [
        {
          value: '9',
          label: '李武'
        }
      ],
      userOptions1: [
        {
          value: "1",
          label: "张1",
          disabled: false
        },
        {
          value: "2",
          label: "张2",
          disabled: false
        },
        {
          value: "3",
          label: "张3",
          disabled: false
        },
        {
          value: "4",
          label: "张4",
          disabled: false
        },
        {
          value: "5",
          label: "张5",
          disabled: false
        },
        {
          value: "6",
          label: "张6",
          disabled: false
        },
        {
          value: "7",
          label: "张7",
          disabled: false
        },
        {
          value: "8",
          label: "张8",
          disabled: false
        },
        {
          value: "9",
          label: "张9",
          disabled: false
        },
        {
          value: "10",
          label: "张10",
          disabled: false
        },
      ],

      rules: {
        trainingName: [
          { required: true, message: "请输入比赛名称", trigger: "blur" },
        ],
        time: [
          { required: true, message: "请选择比赛时间", trigger: "change" },
        ],
        referee: [
          { required: true, message: "请选择裁判", trigger: 'change' },
        ],
        team1: [
          { required: true, message: "请选择队伍一", trigger: 'change' },
        ],
        team2: [
          { required: true, message: "请选择队伍一", trigger: 'change' },
        ],
        location: [
          { required: true, message: "请输入比赛地点", trigger: 'blur' },

        ]
      },
    };
  },
  computed: {
    dialogShow: {
      get() {
        return this.changeDialog;
      },
      set(v) {
        this.$emit("update:changeDialog", v);
      },
    },
  },
  mounted() { },

  methods: {
    makeSure() {
      console.log(this.team);

      this.$refs.raceRef.validate((valid) => {
        if (valid) {
          let list1 = this.team.playerList.map(item => {
            const res = this.userOptions1.find(_item => {
              if (item == _item.value) {
                return _item
              }
            })
            return {
              name: res.label,
              id: res.value
            }
          })

          this.team.playerList = list1
          this.team.startTime = this.team.time[0].replace(' ','T')
          this.team.endTime = this.team.time[1].replace(' ','T')
          this.$emit('makeSure', this.team)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    changeteam(v) {
      console.log(v);
      // this.userOptions2[0].disabled = true
      this.userOptions2.forEach((_item, _index) => {
        _item.disabled = false
      })
      let indexArr = []
      v.forEach(item => {
        this.userOptions2.forEach((_item, _index) => {
          if (item == _item.value) {
            indexArr.push(_index)
          }
        })
      })
      console.log(indexArr, 'a');
      indexArr.forEach((item) => {
        this.userOptions2[item].disabled = true
        this.$set(this.userOptions2[item], 'disabled', true)
      })
      this.$forceUpdate()

    },

  },
};
</script>
<style lang="less" scoped>
.team {
  color: red;

  ::v-deep {
    .el-form-item__label {
      color: #333;
      font-size: 16px;
      font-weight: medium;
    }

    .el-input {
      width: 380px !important;
    }
  }
}
</style>